<script lang="ts" setup>
import { useRouter } from 'vue-router';
import Settlement from './Settlement.vue';
import { ref, reactive, onMounted } from "vue";

const router = useRouter();

type Key = string | number;

interface DataType {
  key: Key;
  name: string;
  type: string | number;
  price: string | number;
  num: number;
  desc: string;
}


const columns = [
  {
    title: "名称",
    dataIndex: "name",
  },
  {
    title: "类型",
    dataIndex: "type",
  },
  {
    title: "数量",
    dataIndex: "num",
  },
  {
    title: "描述",
    dataIndex: "desc",
  },
  {
    title: "价格",
    dataIndex: "price",
  },
  {
    title: "操作",
    dataIndex: "operation",
  },
];

const pageSize = ref(5)

onMounted(() => {
  const size = Math.floor(window.screen.availHeight / 100)
  pageSize.value = size
})

const data = ref<DataType[]>([]);
for (let i = 0; i < 46; i++) {
  data.value.push({
    key: i,
    name: `商品—${i}`,
    num: 1,
    type: 32,
    desc: "商品描述。。。。。。。。。。",
    price: i + 100,
  });
}

const state = reactive<{
  selectedRowKeys: number[];
  loading: boolean;
}>({
  selectedRowKeys: [], // Check here to configure the default column
  loading: false,
});

const total = ref(0);

const calTotal = () => {
  total.value = state.selectedRowKeys.reduce((prev, cur) => {
    const el = data.value[cur];
    return prev + el.num * +el.price;
  }, 0);
};

const onSelectChange = (selectedRowKeys: number[]) => {
  state.selectedRowKeys = selectedRowKeys;
  calTotal();
};


const toConfirmOrder = () => {
  // window.location.href = "/#/cart/confirmOrder";
  router.push({
    path: "/cart/confirmOrder"
  })
  // open.value = true

};

const openSettlement = ref(false)
const openCoupon = ref(false)

const closeSettlement = () => {
  openSettlement.value = false
}

const closeCouponModal = () => {
  openCoupon.value = false
}

const couponVal = ref(0)
const handleOk = () => {
  closeCouponModal()
}
</script>
<template>
  <!-- 
   pt-5 pb-20
 -->
  <div class=" w-full flex justify-center">
    <div class="container">
      <div class="flex font-bold pt-10 text-lg items-center mb-5">
        <img src="/console/cart.png" alt="" class="w-6 mr-3 ml-5" />
        购物车
      </div>

      <div>
        <a-table :scroll="{ x: 1000, }" :pagination="{ pageSize }" :row-selection="{
          selectedRowKeys: state.selectedRowKeys,
          onChange: onSelectChange,
        }" :columns="columns" :data-source="data">
          <template #bodyCell="{ column, record }">
            <div v-if="column.dataIndex === 'num'">
              <el-input-number v-model="record.num" :min="1" :max="9999" @change="calTotal" />
            </div>
            <div v-else-if="column.dataIndex === 'price'">
              {{ record.price * record.num }} 元
            </div>
            <div v-else-if="column.dataIndex === 'operation'">
              <a-popconfirm title="确认删除？" ok-text="确认" cancel-text="取消">
                <a href="#">删除</a>
              </a-popconfirm>
            </div>
          </template>
          <template #footer>
            <div class="rounded pl-5 pr-7 w-full flex flex-wrap items-center justify-between">
              <div class="flex flex-wrap">
                <div class="mr-5 md:mb-0 mb-5">
                  合计：
                  <span class="text-red-700 font-bold text-2xl">
                    {{ total }}元
                  </span>

                  <span class="w-5"></span>

                </div>
                <!--  -->
                <a-button type="primary" @click="openCoupon = true">
                  使用代金券
                </a-button>
              </div>
              <div>
                <router-link to="/index/merchandise">
                  <a-button class="mr-4">逛一逛</a-button>
                </router-link>

                <a-button type="primary" @click="toConfirmOrder">
                  结算 ({{ state.selectedRowKeys.length }})
                </a-button>
              </div>
            </div>
          </template>
        </a-table>
      </div>
    </div>
  </div>

  <a-modal v-model:open="openCoupon" title="代金券" @ok="handleOk">
    <a-input v-model:value="couponVal" placeholder="填写代金券代码, 一次可使用一张" class="md:w-100 mb-5 md:mb-0" />
  </a-modal>

  <Settlement :open="openSettlement" @close="closeSettlement" />
</template>
<style lang="scss" scoped>
@import "../../../utils/scss/global.scss";

.whole {
  background-color: #f1f5fa;
}
</style>
